<template>
  <div>
    <div class="theme">主题设置</div>
    <div class="hello">
      <div class="box-1"></div>
      <div class="box-2"></div>
      <button @click="setTheme('default')">默认主题</button>
      <button @click="setTheme('dark')">暗黑主题</button>
      <button @click="custom(this)">自定义主题</button>
      <input type="color" :value="colorPrimary" @input="custom" />
    </div>
  </div>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { setTheme } from '@/theme/theme.js'

const colorPrimary = ref('red')

// 更改为自定义主题
function custom(e: Event) {
  console.log('log内容e:event', e)
  // (e: Event) => (colorPrimary = e.target.value)
  const config = {
    primary: e.target.value,
    bannerBg: e.target.value
  }
  // localStorage.setItem('primary', e.target.value) // 将新的主题色存入本地
  // localStorage.setItem('bannerBg', e.target.value) // 将新的主题色存入本地
  setTheme('', config)
}
</script>
<style lang="less" scoped>
// @import (reference) '@/theme/style.less';
.theme {
  color: @fontColor;
}
.hello {
  // display: flex;
  // flex-direction: column;
  align-items: left;
  .box-1 {
    width: 50px;
    height: 50px;
    margin-bottom: 10px;
    background: @primary;
  }
  .box-2 {
    width: 50px;
    height: 50px;
    margin-bottom: 10px;
    background: @primary;
    opacity: 0.3;
  }
}
</style>
